<script setup lang="ts">
import UserRequest from '@/request/userRequest';
import { navigate } from '@/utils/navigate';
import { useAppStore } from '@/store';

interface IState {
  addressList: IListShippingAddressesRes[];
}
const store = useAppStore();
const state = reactive<IState>({ addressList: [] });

onShow(() => {
  fetchAddressList();
});

// 获取地址列表
const fetchAddressList = () => {
  UserRequest.ListShippingAddress({ hasLoading: true }).then((res) => {
    state.addressList = res.data;
  });
};

// 前往编辑界面
const handleNavigateEdit = (beeperId?: number | string, relationBeeperId?: number | string, harvestAddressId?: number | string) => {
  navigate({ url: `/subcontract/person/shippingAddress/addressEdit?beeperId=${beeperId}&relationBeeperId=${relationBeeperId}&harvestAddressId=${harvestAddressId}` });
};
</script>

<template>
  <van-empty description="暂无收货地址,点击去添加" v-if="state.addressList.length === 0" />
  <view class="c-pd overflow-scroll" :style="{ paddingBottom: `${44 + store.$state.systemInfo.safeAreaInsets!.bottom}px` }" v-else>
    <view class="bg-white mb-12px c-pd c-br flex justify-between items-center" v-for="(item, index) in state.addressList" :key="index" @click="handleNavigateEdit(item.beeperId || '', item.relationBeeperId || '', item.harvestAddressId)">
      <view class="flex-1">
        <view class="fw-bold">
          <text class="c-bg px-8px c-text-12 c-br mr-4px" v-if="item.beeperId">呼叫器地址</text>
          {{ item.address || '' }} {{ item.villageName || '' }}{{ item.buildName || '' }}{{ item.unitName || '' }}{{ item.floorName || '' }}{{ item.houseNumber || '' }}
        </view>
        <view class="c-text-color-grey c-text-12 mt-12px">
          <text class="mr-8px">{{ item.linkName }}</text>
          <text>{{ item.phone }}</text>
        </view>
      </view>
      <i class="i-mingcute:right-fill text-22px" />
    </view>

    <view class="pos-fixed left-0 px-12px w-screen box-border z-99" :style="{ bottom: `${store.$state.systemInfo.safeAreaInsets!.bottom}px` }">
      <view class="c-bg text-white py-12px c-br text-align-center" @click="() => handleNavigateEdit('', '', '')">添加地址</view>
    </view>
  </view>
</template>
